<template>
    <div class="page-description">
        <van-nav-bar class="description-tilte" left-arrow :fixed="true" :title="$t('m.Description')" @click-left="$router.back(-1)">
        </van-nav-bar>
        <div class="description-box">
            <div class="description-conter">
                <p class="remnant">{{remnant}}/1500</p>
            </div>
            <van-cell-group>
                <van-field
                    v-model="description"
                    type="textarea"
                    placeholder=""
                    rows="1"
                    :disabled="btnLoading"
                    maxlength="1500"
                    @input="descriptionConter()"
                />
            </van-cell-group>
            <div class="submit-btn-box">
                <van-button size="large" class="submit-btn" :loading="btnLoading" @click="eidtDev()">{{$t('m.Submit')}}</van-button>
            </div>
        </div>

    </div>
</template>
<script>
    import {setUserInfo} from '../../static/api/mgc_api'
    import Qs from 'qs'
    export default {
        name: 'Description',
        data() {
            return {
                screenHeight: document.body.clientHeight, // 这里是给到了一个默认值 （这个很重要），
                originHeight: document.body.clientHeight, //默认高度在watch里拿来做比较
                description: '',
                name:'',
                remnant: 0,
                btnLoading: false
            };
        },
        methods: {
            descriptionConter() {
                var txtVal = this.description.length
                this.remnant = txtVal
            },
            eidtDev() {
                let data = {
                    'description': this.$translateLang(this.description,'zawgyiTounicode'),
                    'name': this.$translateLang(this.name,'zawgyiTounicode'),
                }
                let params = Qs.stringify(data)
                this.btnLoading = true
                setUserInfo(params).then((res) => {
                    if (res.data) {
                        if (res.data.errorID === 0) {
                            this.editLocalUserInfo('description', this.$translateLang(this.description,'zawgyiTounicode'))
                            this.$router.back(-1)
                        } else {
                            this.$toast(res.data.message)
                        }
                        this.btnLoading = false
                    }
                })
                    .catch((error) => {
                        console.log(error)
                        this.$toast('error,please try again leter')
                        this.btnLoading = false
                    })
            },
            // 修改本地缓存信息
            editLocalUserInfo(nameProperty, value) {
                let userInfo = localStorage.getItem("userInfo") || '';
                // 修改description后这里需要优化
                if (userInfo) {
                    userInfo = JSON.parse(userInfo);
                    userInfo[nameProperty] = value;
                    this.setNewLocalUserInfo(userInfo);
                }
            },
            // 保存用户信息
            setNewLocalUserInfo (i) {
                let _userInfo = JSON.stringify(i)
                localStorage.setItem("userInfo", _userInfo);
            },
            translateString(str){
                if (!str) return ''
                return this.$translateLang(str, 'unicodeTozawgyi');
                // if(this.$store.state.store.localLang == 'MM'){
                //     return this.$translateLang(str,'unicodeTozawgyi');
                // }else {
                //     return str;
                // }
            },
            initDev() {
                let _desc = this.$route.params.dev || ''
                if (_desc != null) {
                    // this.description = _desc.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(new RegExp("\n", "gm"), '<br/>')
                    this.description = this.translateString(_desc)
                }
                this.descriptionConter()
            }
        },
        watch: {
            screenHeight(val) {
                if (this.originHeight != val) {
                    this.isOriginHei = false;
                } else {
                    this.isOriginHei = true;
                }
            }
        },
        mounted() {
            let userInfo=localStorage.getItem('userInfo')
            if(userInfo){
                this.name=JSON.parse(userInfo).name||''
            }
            window.onresize = () => {
                return (() => {
                    window.screenHeight = document.body.clientHeight
                    this.screenHeight = window.screenHeight
                })()
            }
            this.initDev()
        }
    }

</script>
<style>
    .description-tilte.van-nav-bar{
        background-color: #f2f2f2;
    }
    .description-tilte.van-nav-bar .van-icon{
        color: #bdbdbd;
    }
    .description-box .van-cell-group{
        height: 78%;
        margin: 0 4%;
    }
    .description-box .van-hairline--top-bottom:after{
        border: 1px solid #2c3e50;
    }
    .description-box .van-cell,.description-box .van-field__body, .description-box .van-field--min-height .van-field__control{
        height: 100%;
    }
    .description-box .submit-btn.van-button--large{
        height: 46px;
        line-height: 44px;
    }
    .description-box .van-nav-bar__title{
        color: #000;
    }
</style>
<style scoped>
    .description-box{
        height: 100%;
        padding: 46px 0 0 0;
        box-sizing: border-box;
    }
    .description-conter{
        text-align: right;
        margin: 0 4%;
        height: 5%;
        position: relative;
    }
    .description-conter .remnant{
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 0;
    }
    .submit-btn-box {
        height: 17%;
        margin: 0 4%;
        position: relative;
    }
    .submit-btn{
        position: absolute;
        top: 50%;
        margin-top: -23px;
        border: 1px solid #f90;
        background: #f90;
        border-radius: 5px;
        color: #fff;
    }
</style>
